<template>
    <el-card class="card">
        <div class="container">
            <h2 class="homeTitle">
                今日数据
                <i>{{ currentDate }}</i>
            </h2>
            <div class="overviewBox">
                <ul>
                    <li v-for="value in content">
                        <p class="tit">{{ value.tit }}</p>
                        <p class="num">{{ value.num }}</p>
                    </li>
                </ul>
            </div>
        </div>
    </el-card>

    <div class="homeMain">
        <el-card class="card">
            <div class="container">
                <h2 class="homeTitle">
                    菜品总览
                </h2>
                <div class="overviewBox">
                    <ul>
                        <li>
                            <p class="tit">已启售</p>
                            <p class="num">365</p>
                        </li>
                        <li>
                            <p class="tit">已停售</p>
                            <p class="num">365</p>
                        </li>
                        <li>
                            <div class="add-dish-btn">
                                <el-icon size="25">
                                    <CirclePlus />
                                </el-icon>
                                <span style="font-weight: 400;">新增菜品</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </el-card>
        <el-card class="card">
            <div class="container">
                <h2 class="homeTitle">
                    套餐总览
                </h2>
                <div class="overviewBox">
                    <ul>
                        <li>
                            <p class="tit">已启售</p>
                            <p class="num">365</p>
                        </li>
                        <li>
                            <p class="tit">已停售</p>
                            <p class="num">365</p>
                        </li>
                        <li>
                            <div class="add-dish-btn">
                                <el-icon size="25">
                                    <CirclePlus />
                                </el-icon>
                                <span style="font-weight: 400;">新增套餐</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </el-card>
    </div>
    <el-card class="card last">
        <div class="container">
            <h2 class="homeTitle">
                订单信息
            </h2>
            <el-empty description="目前啥都没有" />
        </div>
    </el-card>
</template>

<script setup lang='ts'>
import { ref, onMounted } from 'vue'
import { CirclePlus } from '@element-plus/icons-vue'

const content = [
    { tit: '营业额', num: '￥2036' },
    { tit: '完成订单', num: '360' },
    { tit: '订单完成率', num: '100%' },
    { tit: '平均客单价', num: '￥32.65' },
    { tit: '较上日营业额', num: '+ 125' }
]

const currentDate = ref('')
onMounted(() => {
    const date = new Date();
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    currentDate.value = `${year}.${month}.${day}`;
});
</script>


<style lang='scss' scoped>
:deep(.el-card__body) {
    padding: 10px 15px;

}

.card {
    width: 98%;
    margin-bottom: 20px;
}

.card.last {
    max-height: 360px;
    // flex: 1;
    // margin-bottom: 25px;
}

.container {
    margin-bottom: 20px;
}

.homeTitle {
    font-weight: 600;
    font-size: 16px;
    color: #333;
    letter-spacing: -.2px;
    padding: 5px 0 0;
    margin-bottom: 18px;

    i {
        font-size: 14px;
        color: #666;
        font-weight: 400;
    }
}

.overviewBox {
    ul {
        display: flex;
        flex-direction: row;
        text-align: left;
        margin-left: -20px;
        list-style-type: none;
    }

    li {
        flex: 1;
        background: #fffbf0;
        border-radius: 4px;
        margin-left: 20px;
        padding: 20px;
    }

    .tit {
        font-size: 14px;
    }

    .num {
        font-weight: 700;
        font-size: 28px;
        line-height: 34px;
        padding: 12px 0 10px;
        color: #333;
    }
}

.homeMain {
    width: 98%;
    display: flex;

    .card:last-child {
        margin-left: 20px;
    }

    ul {
        li:last-child {
            flex: 0.1;
            background-color: #fff;
        }
    }

    .add-dish-btn {
        background-color: #ffc200 !important;
        border-color: #ffc200 !important;
        color: #333 !important;
        font-weight: 600;
        padding: 12px 24px;
        border-radius: 8px;
        width: 80px;
        height: 50px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        &:hover {
            background-color: #ffcc33 !important;
            border-color: #ffcc33 !important;
        }

        .el-icon {
            font-size: 18px;
        }
    }
}
</style>